<template>
    <div class="banlace-block">
        <h3>|&nbsp;账户余额</h3>
        <div class="coupon-block">
            <span><Icon type="ios-link-outline" />{{ balance }}</span>
            <span>点券</span>
            <div>
                <Button type="primary" style="width:76px;" @click="toReCharge">充值</Button>
                <Button style="width:76px;background:rgba(129,143,161,1);color:#fff;margin-left:20px" @click="giftModal = true">转赠</Button>
            </div> 
        </div>
        <div class="record-block">
            <a @click="active = 1" :class="active === 1? 'activeClass':''" >消费记录</a>
            <a @click="active = 2" :class="active === 2? 'activeClass': ''">充值记录</a>
        </div>
        <Table :columns="columns" :data="tableData"></Table>
        <Modal
            v-model="giftModal"
            title="转赠余额"
            width="480"
            :mask-closable="false">
            <Form :label-width="80">
                <FormItem label="受赠方邮箱:">
                    <Input v-model="transferObj.recipientEmail" style="width:250px"/>
                </FormItem> 
                <FormItem label="转赠数额:">
                    <Input v-model="transferObj.transferCoin" style="width:250px"/>
                </FormItem>     
            </Form>
            <h3 style="margin:40px 5px">支付验证</h3>
            <div style="margin-left:20px">
                <div>
                    <span>验证</span>
                    <Button @click="isChecked = 1" style="margin:0 20px" :class="isChecked === 1? 'activeButton':''"><Icon type="ios-tablet-portrait" />手机验证</Button>
                    <Button @click="isChecked = 2" :class="isChecked === 2? 'activeButton':''"><Icon type="ios-mail-outline" />邮箱验证</Button>
                </div>
                <p style="color:rgba(102,102,102,1);font-size:12px;margin:20px 0">{{ checkEmail }}</p>
                <div>
                    <Input v-model="transferObj.checkCode" placeholder="输入验证码" style="width:200px"/>
                    <Button type="primary" v-show="show" @click="getVerificationCode">获取验证码</Button>
                    <Button style="width:92px" v-show="!show" disabled>{{ timeCount }}s</Button>
                </div>
            </div>
            <div slot="footer">
                <Button type="default" @click="giftModal = false">取消</Button>
                <Button type="primary" @click="wetherTransfer">转赠</Button>
            </div>  
        </Modal>
        <Modal
            v-model="wetherTransferModal"
            title="订单确认"
            width="480"
            :mask-closable="false">
            <div class="modal-block">
                <div class="modal-check-block"></div>
                <p style="color:rgba(51,51,51,1);font-size:16px;">支付验证成功!</p>
                <p>注意，点券一经转赠后不可退回，请确认好对方邮箱信息再转赠！</p>
                <p>受赠方邮箱: {{ transferObj.recipientEmail }}</p>
                <p>转赠数额: {{ transferObj.transferCoin }}</p>
            </div>
            <div slot="footer">
                <Button type="default" @click="sureTransfer({operateType:2})">取消</Button>
                <Button type="primary" @click="sureTransfer({operateType:1})">确定</Button>
            </div> 
        </Modal>
    </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import { formatData } from '@/utils/format'
export default {
    computed: {
        ...mapGetters({
            balance:'balance'
        }),
    },
    data(){
        return{
            active:1,
            isChecked:2,
            columns:[],
            columns1:[
                {
                    title:'订单号',
                    align:'center',
                    width:'150',
                    key:'orderNum',
                },
                {
                    title:'名称',
                    align:'center',
                    width:'150',
                    key:'name'
                },
                {
                    title:'类型',
                    align:'center',
                    width:'100',
                    key:'objType',
                },
                {
                    title:'数量',
                    align:'center',
                    render:(h,params) => {
                        return h('div',params.row.count + params.row.unit)
                    }
                },
                {
                    title:'单价',
                    align:'center',
                    width:'120',
                    render:(h,params) => {
                        return h('div',params.row.price + '点券')
                    }
                },
                {
                    title:'时间',
                    align:'center',
                    width:'180',
                    render:(h,params) => {
                        return h('div',formatData(params.row.createTime,{type:'detail'}))
                    }
                },
                {
                    title:'花费变更',
                    align:'left',
                    render:(h,params) => {
                        return h('div',{
                            style:{
                                color:"rgba(243,101,57,1)",
                                fontSize:"12px",
                            }
                        }, '-' + params.row.price * params.row.count)
                    }
                },
            ],
            columns2:[
                {
                    title:'交易号',
                    width:'150',
                    align:'center',
                    key:'payNum',
                },
                {
                    title:'类型',
                    align:'center',
                    key:'payWay',
                },
                {
                    title:'货币',
                    align:'center',
                    key:'currencyCode',
                },
                {
                    title:'金额',
                    align:'center',
                    key:'money'
                },
                {
                    title:'时间',
                    align:'center',
                    width:'180',
                    render:(h,params) => {
                        return h('div',formatData(params.row.createTime,{type:'detail'}))
                    }
                },
                {
                    title:'花费变更',
                    align:'center',
                    render:(h,params) => {
                        return h('div',{
                            style:{
                                color:"rgba(145,205,3,1)",
                                fontSize:"12px",
                            }
                        }, '+' + params.row.coinCnt)
                    }
                },
            ],
            tableData:[],
            columns1Data:[],
            columns1Data:[],
            giftModal:false,
            wetherTransferModal:false,
            show:true,
            timeCount:'',
            timer:null,
            transferObj:{
                checkCode:"",
                recipientEmail:"",
                transferCoin:"",
            },
            checkObj:{
                applyNum:"",
                operateType:""
            },
            checkEmail:localStorage.getItem("email")
        }
    },
    methods: {
        ...mapActions(['XuserBalance','XexpenseRecord','XrechargeRecord','XtransferVerificationCode','XapplyTransfer','XwhetherTransfer']),
        toReCharge(){
            this.$router.push({name:'recharge'})
        },
        async banlacePage(){
            let [balance,expenseRecord,rechargeRecord] = await Promise.all([this.XuserBalance(),this.XexpenseRecord(),this.XrechargeRecord()]);
            this.tableData = this.columns1Data = expenseRecord.data;
            this.columns2Data = rechargeRecord.data;
        },
        getVerificationCode(){
            const TIME_COUNT = 60;
            if(!this.timer){
                this.timeCount = TIME_COUNT;
                this.show = false;
                this.timer = setInterval(() => {
                    if(this.timeCount > 0 && this.timeCount <= TIME_COUNT){
                        this.timeCount--
                    }else{
                        this.show = true;
                        clearInterval(this.timer);
                        this.timer = null;
                    }
                },1000)
            }
            this.XtransferVerificationCode().then(res => {
                this.$Message.success("验证码发送成功")
            })
        },
        wetherTransfer(){
            this.XapplyTransfer(this.transferObj).then(res => {
                this.checkObj.applyNum = res.data
                this.giftModal = false;
                this.wetherTransferModal = true;
            })
            .catch(err => {
                this.$Message.error(err.response.data.message)
            })
            
        },
        sureTransfer(type){
            this.checkObj.operateType = type.operateType;
            this.XwhetherTransfer(this.checkObj).then(res => {
                let mes = type.operateType === 1 ? "赠送成功" : "已取消赠送"
                this.$Message.success(mes);
                this.wetherTransferModal = false;
                this.banlacePage();
            })
            .catch(err => {
                this.$Message.error(err.response.data.message)
            })
        }
    },
    watch: {
        active(){
            this.columns = this.active === 1? this.columns1 : this.columns2;
            this.tableData = this.active === 1 ? this.columns1Data : this.columns2Data;
        }
    },
    mounted() {
        this.columns = this.columns1;
        this.banlacePage()
    },
}
</script>

<style lang="scss" scoped>
    .banlace-block{
        h3{
            margin:20px 0 40px 0;
        }
    }
    .coupon-block{
        height: 32px;
        line-height: 32px;
        margin-bottom:60px;

        & > span:first-of-type{
            font-size:24px;
            font-weight:400;
            color:rgba(243,101,57,1);
            vertical-align: center;
        }

        & > span:last-of-type{
            font-size:12px;
            font-weight:400;
            color:rgba(51,51,51,1);
        }

        div{
            display: inline-block;
            margin-left:60px;
        }
    }

    .record-block{
        margin-bottom:10px;
        a{
            display: inline-block;
            height: 40px;
            padding: 10px;
            font-weight:400;
            color:rgba(102,102,102,1);
            margin-right:60px;

            &:hover{
                color:rgba(0,104,233,1);
                border-bottom: 2px solid rgba(0,104,233,1);
            }
        }
    }
    .modal-block{
        p{
            margin:20px auto;
            text-align:center;
            color:rgba(102,102,102,1);
            font-size:12px;
        }
    }
    .modal-check-block{
        margin:20px auto;
        width:60px;
        height:60px;
        border-radius:50%;
        background:#91CD03;
        position: relative;

        &::after{
            content: "";
            position:absolute;
            height: 15px;
            width: 25px;
            border: 4px solid white;
            border-top: none;
            border-right: none;
            top:30%;
            left:30%;
            transform: rotate(-55deg);
        }
    }
    .activeClass{
        color:rgba(0,104,233,1) !important;
        border-bottom: 2px solid rgba(0,104,233,1);
    }
    .activeButton{
        background:rgba(122,179,250,1);
        color: #fff;
    }
</style>
